<script lang="ts" setup>
  import { number } from 'echarts'
  import { nextTick, ref, watch } from 'vue'
  import { addCategoryService, updateCategoryService } from '@/api/category'
  import { ElMessage } from 'element-plus'
  const dialogVisible = ref<boolean>(false)
  const ruleFormRef = ref()
  const title = ref('新增竞赛分类')
  const ruleForm = ref({
    id: '',
    name: '',
    desc: '',
    startTime: '',
    endTime: '',
    time: null,
    type: 0, // 0: 默认流程，1: 编排流程
    departmentIds: [], // 部门id数组
  })
  const rules = {
    name: [{ required: true, message: '请输入分类名', trigger: 'blur' }],
    time: [{ required: true, message: '请选择持续时间', trigger: 'blur' }],
  }
  const close = () => {
    ruleFormRef.value?.resetFields()
  }
  const show = (item: any = {}) => {
    title.value = '新增竞赛分类'
    if (item.name) {
      title.value = '编辑竞赛分类'
      nextTick(() => {
        Object.assign(ruleForm.value, item)
        ruleForm.value.time = [item.startTime, item.endTime] as [string, string]
      })
    }
    dialogVisible.value = true
  }
  // 级联组件配置项
  const config = {
    cascaderProps: {
      multiple: true,
    },
  }
  const listQuery = {
    url: '/department/getAllParent',
    params: {},
  }
  // 确认按钮
  const handleConfim = async () => {
    ruleFormRef.value.validate(async (valid) => {
      if (valid) {
        dialogVisible.value = false
        if (ruleForm.value.id != '' && ruleForm.value.id != null) {
          // 编辑
          updateCategoryService(ruleForm.value).then(() => {
            ElMessage.success('竞赛分类修改成功')
            emit('refreshList')
          })
          return
        }
        addCategoryService(ruleForm.value).then(() => {
          ElMessage.success('竞赛分类添加成功')
          emit('refreshList')
        })
      }
    })
  }
  watch(
    () => ruleForm.value.time,
    (newVal) => {
      if (newVal && Array.isArray(newVal) && newVal.length === 2) {
        ruleForm.value.startTime = newVal[0]
        ruleForm.value.endTime = newVal[1]
      } else {
        ruleForm.value.startTime = ''
        ruleForm.value.endTime = ''
      }
    },
  )
  const emit = defineEmits(['refreshList'])
  defineExpose({
    show,
  })
</script>
<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="title" width="40%" center @close="close">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="分类名" prop="name">
          <el-input v-model.trim="ruleForm.name" placeholder="请输入分类名" prop="name" />
        </el-form-item>
        <el-form-item label="持续时间" prop="time">
          <DateTimePicker v-model="ruleForm.time" type="datetimerange" />
        </el-form-item>
        <el-form-item label="设置部门" prop="departmentIds">
          <Cascader
            ref="deptCascaderRef"
            v-model="ruleForm.departmentIds"
            :config="config"
            :list-query="listQuery"
            placeholder="请选择参加的部门，默认为所有部门"
          />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer dialog-font">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfim">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
